<template>
  <el-card class="search">
    <template #header>
      <div class="search-header">
        <span>线上热门搜索</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </template>
    <el-row :gutter="30">
      <el-col :span="12"><SearchChart :chartData="userData" /></el-col>
      <el-col :span="12"><SearchChart :chartData="countData" /></el-col>
    </el-row>
    <el-table :data="tableData" border size="mini" style="width: 100%">
      <el-table-column
        width="80"
        align="center"
        type="index"
        label="排名"
        sortable
      ></el-table-column>
      <el-table-column
        prop="word"
        label="搜索关键字"
        width="180"
      ></el-table-column>
      <el-table-column prop="user" label="用户量" sortable></el-table-column>
      <el-table-column prop="count" label="周涨幅" sortable></el-table-column>
    </el-table>
    <el-pagination
      class="search-pagination"
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import SearchChart from './searchChart'
export default {
  name: 'Search',
  data() {
    return {
      userData: {
        title: '搜索用户数',
        value: '12,321',
        percent: 17.1,
        data: [23, 45, 6, 32, 53, 41, 31, 45]
      },
      countData: {
        title: '人均搜索次数',
        value: '2.7',
        percent: -26.2,
        data: [23, 45, 6, 32, 53, 41, 31, 45]
      },
      currentPage: 1,
      pageSize: 7
    }
  },
  components: {
    SearchChart
  },
  computed: {
    // 解构出来state的数据
    // ...mapState('home', ['homeData']),
    ...mapState({
      searchWord: state => state.home.homeData.searchWord
    }),
    // 计算属性是一上来就会计算，一开始searchWord没有数据是空，不能读取到所以是searchWord是undefined
    tableData() {
      let { searchWord, currentPage, pageSize } = this
      let start = (currentPage - 1) * pageSize
      let end = currentPage * pageSize
      return searchWord ? searchWord.slice(start, end) : []
    },
    total() {
      let { searchWord } = this
      return searchWord ? searchWord.length : 0
    }
  },
  // watch: {
  //   searchWord: {
  //     // searWord从无到有先变化会比computed执行
  //     handler(val) {
  //       this.tableData = val.slice(0, 6)
  //     }
  //     // immediate: true
  //   }
  // },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style lang="sass" scoped>
.search
  margin-bottom:20px

.search-header
  padding:15px 20px
  display: flex
  justify-content: space-between
  algin-item:center
</style>
